<template>
    <div>
      <!-- 扫码分享 -->
      <el-dialog :visible.sync="dialogVisible" lock-scroll width="343px" title="申请收款码" custom-class="el-dialog-share">
        <div style="width: 100%; position: relative">
          <div class="close" @click="hide()">
            <i style="font-size: 22px; color: white" class="el-icon-close"></i>
          </div>
          <div class="apply-title" :style="{ width: '100%', height: '267px', borderRadius: '10px', background: showType === 1? 'linear-gradient( to top, #FBAD19 0%, #FF6200 100%)' : 'linear-gradient( to top, #FC6C6C 0%, #FD3131 100%)' }">
            <div class="apply-header" style="display: flex;align-items: center;">
                <img v-if="showType === 1" src="@/assets/code.png" style="width: 48px; height: 48px;margin-right: 10px;"/>
                <div class="apply-header-title">{{showType === 1 ? '申请收款码' : '申请小程序商城'}}</div>
            </div>
            <div class="apply-body">
                <div class="apply-body-text">
                    {{showType === 1 ? '申请聚合支付收款码，支持主扫被扫，费率低、到账快，客户转款更方便。请留下您的联系方式，专属客服全程为您服务。' : '一键申请小程序商城，打通线上线下双渠道销售智能化营销，助力您业绩大卖，赶快来申请吧！'}}
                </div>
            </div>

          </div>
          <div class="apply-info" style="width: 100%;height: 258px;background: #FFFFFF;border-radius: 10px;margin-top: -51px;padding: 30px 14px 23px;">
            <el-form :model="form" label-position="left">
                <el-form-item label="公司名称" :rules="rules" ref="ruleForm" :label-width="formLabelWidth" class="el-form-item-border">
                <div>{{ form.name }}</div>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone" class="el-form-item-border"
                :rules="[
                    { required: true, message: '请输入手机号码', trigger: ['blur', 'change'] },
                    { pattern: /^1[3|4|5|6|7|8|9]\d{9}$/, message: '请输入正确的手机号!' },
                ]">
                <el-input v-model="form.phone" maxlength="11" style="width: 88px;"></el-input>
                </el-form-item>
                <el-form-item label-width="0" class="el-form-item-btn">
                    <el-button type="primary" round @click="onSubmit">提交申请</el-button>
                </el-form-item>
            </el-form>
          </div>
        </div>
      </el-dialog>
    <dialogSimplePrompt ref="openPrompt" @onSure="handleSure" ></dialogSimplePrompt>

    </div>
  </template>
  
  <script>
import dialogSimplePrompt from './dialogSimplePrompt' //单据操作提示
  // import QRCode from 'qrcodejs2'
  import { mapGetters } from 'vuex'
  import Vue from 'vue'
  import { ACCESS_TOKEN, TENANT_ID, USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'
  import { getAction,postAction  } from '../../api/manage'
  import { color } from 'echarts'
  export default {
    name: 'dialogApply',
    components: {
    dialogSimplePrompt,
  },
    computed: {
      ...mapGetters(['name']),
    },
    created() {},
    updated() {},
    data() {
      return {
        dialogVisible: false, // 新增弹框
        dialogResult: false,
        resultList: [],
        signatureUrl: '',
        form: {
          name: '',
          phone: '',
        },
        formLabelWidth: '82px',
        showType:1,
      }
    },
    created(){
        let accountBookId = Vue.ls.get(ACCOUNT_BOOK).id
        // 打开弹框获取公司名称和手机号
        getAction(`/accountbookinfo/xghAccountBook/queryById?id=${accountBookId}`).then((res) => {
          console.log(res)
          if (res.success) {
            this.form.name = res.result.companyName
            this.form.phone = res.result.createBy
            console.log("获取公司名称和手机号",res)
          } else {
            this.$message.error(res.message)
          }
        })
    },
    methods: {
        onSubmit() {
        console.log('submit!', this.form);
        let params = {
          accountBookName: this.form.name,
          phone: this.form.phone,
          requestType: this.showType
        }
        if (this.showType == 2) {
          params.myType = 1
        }
        // 成功后弹出操作确认弹框
        postAction('/xghRequestForm/xghRequestForm/add',params).then((res) => {
          console.log(res)
          if (res.success) {
            this.dialogVisible = false
            // this.$emit('openPrompt')
            this.$refs.openPrompt.showOneBtn('el-icon-success', '您的申请已提交。请保持电话畅通，</br>客服人员会第一时间联系您。', '好的，知道了')
          } else {
            this.$message.error(res.message)
          }
        })
      },
      handleSure(){
        this.$emit('changeApplyBtn',this.showType)
        this.$refs.openPrompt.hide()
    },
      show(type) {
        this.showType = type
        this.dialogVisible = true
        // let accountBookId = Vue.ls.get(ACCOUNT_BOOK).id
        // let signUrl = `https://yun.xiangguohe.cn?from=share&accountBookId=${accountBookId}&${params}`
        // console.log(signUrl)
  
        // setTimeout(() => {
        //   document.getElementById('qrcode1').innerHTML = ''
        //   var qrcode = new QRCode(this.$refs.qrCodeUrl1, {
        //     text: signUrl,
        //     width: 120,
        //     height: 120,
        //     colorDark: '#333333', //二维码颜色
        //     colorLight: '#ffffff', //二维码背景色
        //     correctLevel: QRCode.CorrectLevel.H,
        //   })
        // }, 500)
      },
  
      hide() {
        this.dialogVisible = false
      },
      showResult(orderId, name = '') {
        this.signatureUrl = ''
        this.resultList = []
        this.dialogResult = true
        let that = this
        getAction(`/xghOrderRecord/xghOrderRecord/list?orderId=${orderId}`).then((res) => {
          console.log(res)
          if (res.success) {
            let list = res.result || []
            that.resultList = list.map((item) => {
              item.companyName = name
              if (item.recordType == 1) {
                item.text = '查看了单据'
              } else if (item.recordType == 2) {
                item.text = '签名确认了单据信息'
                that.signatureUrl = item.content
              } else if (item.recordType == 3) {
                item.text = '给您留言:' + item.content
              }
              return item
            })
            // that.resultList = that.resultList.concat(that.resultList)
          } else {
            this.$message.error(res.message)
          }
        })
      },
      hideResult(id) {
        this.dialogResult = false
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  ::v-deep .el-form-item__error{
    left: unset;
    right: 0;
  }
 ::v-deep .el-input__inner{
    padding: 0;
  }
   ::v-deep .el-input__inner{
    border: none;
   }
  .el-form-item-border{
    border-bottom: 1px solid #F1F1F1;
  }
  ::v-deep .el-form-item-btn{
    width: 100%;
    padding: 40px 14px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-form-item__content{
        width: 100%;
        .el-button{
         width: 100%;
        }
    }
     
  }
    ::v-deep .el-form-item__label:before {
    content: '' !important;
}
  ::v-deep .el-form-item__label:after {
    content: '*';
    color: #F56C6C;
    margin-left: 1px;
  }
  ::v-deep .el-dialog-share{
    background: transparent;
    border-radius:10px;
  }
  ::v-deep .el-dialog__body {
    padding: 0;
  }
  ::v-deep .el-dialog__header {
    display: none;
  }
  ::v-deep .el-form-item__content{
    text-align: right;
  }
  .close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 42px;
    height: 42px;
    padding: 10px;
    // background: red;
  }
  .close-normal {
    width: 42px;
    height: 42px;
    padding: 10px;
  }
  .list-item {
    border-top: solid #efefef 1px;
    padding: 8px 10px 8px 0;
    display: flex;
  }
  .apply-header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 118px;
  }
  .apply-header-title{
    font-weight: bold;
    font-size: 36px;
    color: #FFFFFF;
  }
  .apply-body{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .apply-body-text{
    width: 254px;
    font-weight: bold;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 25px;
  }
  </style>
  
  